<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="绑定事件按钮1" id="bn_1">
    <input type="button" value="绑定事件按钮2" id="bn_2">
    <input type="button" value="解绑按钮1" id="unbind_1">
    <input type="button" value="解绑按钮2" id="unbind_2">


    <script>
        function my$(id) {
            return document.getElementById(id);
        }


        my$("bn_1").onclick = function (){
            alert("绑定事件1");
        }   

        //第一种解绑方式
        my$("unbind_1").onclick = function (){
            my$("bn_1").onclick = null;  
        }


        function f1() {
            alert("绑定事件2-1");
        }

        
        function f2() {
            alert("绑定事件2-2");
        }


        my$("bn_2").addEventListener("click",f1,false);
        my$("bn_2").addEventListener("click",f2,false);

        //第二种解绑方式
        my$("unbind_2").onclick = function (){
            //这种方式解绑，添加事件方法的不能使用匿名函数，不然不知道函数名叫什么
            my$("bn_2").removeEventListener("click",f1,false);
            my$("bn_2").removeEventListener("click",f2,false);
        }


    </script>
</body>

</html>